<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字转语音</title>
</head>
<body>

<form id="ttsForm">
  <textarea name="input" id="ttsTextarea" cols="30" rows="10" placeholder="请输入文字" required></textarea>
  <br>
  <button type="submit" id="submitBtn">生成音频</button>
  <hr>
  <div id="ttsResponse"></div>
</form>

<script src="./jquery.min.js"></script>
<script>
  $("#ttsForm").submit(function(event) {
    event.preventDefault();
    if ($("#ttsTextarea").val().length < 5) {
      alert("文本太短了")
    } else {
      $("#submitBtn").prop('disabled', true);

      $("#ttsResponse").html('<div class="loading">音频生成中，请稍候...</div>');

      $.post("/ai/tts", $("#ttsForm").serialize(), function(resp) {
        $("#ttsResponse").html(`
                    <audio controls>
                        <source src="${resp}" type="audio/mpeg">
                    </audio>
                `)
      }).always(function() {
        $("#submitBtn").prop('disabled', false);
      });
    }
  });
</script>

</body>
</html>
